<template>
  <div>
    <h1>医院</h1>
    <div class="level">
      <!-- 这里用一个插槽 -->
      <div>等级:</div>
      <ul>
        <li :class="{ activeMenu: activeRef == '' }" @click="select('')">全部</li>
        <li v-for=" level  in  levelArr " :key="level.value" @click="select(level.value)"
          :class="{ activeMenu: activeRef == level.value }">{{ level.name }}</li>
      </ul>
    </div>
    <div class="region">
      <div>地区:</div>
      <ul>
        <li :class="{ activeMenu: activeFlag == '' }" @click="changeFlag('')">全部</li>
        <li :class="{ activeMenu: activeFlag == region.value }" v-for="region in regionArr" :key="region.name"
          @click="changeFlag(region.value)">{{ region.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { HospitalLevelRegionArr } from '@/api/home/type';
import { hospital_region } from '../../api/home/index'
import { onMounted, ref } from 'vue';
// 等级数组
let levelArr = ref<HospitalLevelRegionArr>([])
// 地区数组
let regionArr = ref<HospitalLevelRegionArr>([])
// 选中的等级目标
let activeRef = ref<string>('')
// 选中的地区目标
let activeFlag = ref<string>('')
onMounted(() => {
  // 调用等级请求
  reqLevel()
  // 调用地区请求
  getRegion()
})
// 请求等级的方法
let reqLevel = async () => {
  let result: any = await hospital_region('hostype')
  if (result.code === 200) {
    levelArr.value = result.data
  }
}
// 请求地区的方法
let getRegion = async () => {
  let result: any = await hospital_region('beijin')
  if (result.code === 200) {
    regionArr.value = result.data
  }
}
// 改变等级选中元素
let select = (value: string) => {
  activeRef.value = value
  //把这个等级给父组件，从而重新渲染页面(自定义事件)
  $emit('getLevel', value)
}
let $emit = defineEmits(['getLevel', 'getRegion'])
// 改变地区选中元素
let changeFlag = (value: string) => {
  activeFlag.value = value
  $emit('getRegion', value)
}
</script>

<style scoped lang="scss"> .activeMenu {
   color: #1890ff;
 }

 h1 {
   margin-bottom: 30px;
   color: #666;
 }

 .level {
   display: flex;
   color: #666;

   ul {
     display: flex;

     li {
       margin-bottom: 20px;
       margin-left: 20px;
       cursor: pointer;
     }

     li:hover {
       color: #1890ff;
     }
   }
 }

 .region {
   color: #666;

   div {
     width: 45px;
   }

   display: flex;

   ul {
     display: flex;
     flex-wrap: wrap;

     li {
       margin-bottom: 15px;
       margin-left: 20px;
       cursor: pointer;
     }

     li:hover {
       color: #1890ff;
     }
   }
 }
</style>